<template>
<div class="index">
  <!-- v-model 双向绑定：哪一个下标的频道处于活动状态 -->
 <van-tabs v-model="activeIndex">
      <van-tab v-for="(item,index) in channels" :title="item.name" :key="index">
          <article-list :channel="item" @showMoreAction="hShowMoreAction"></article-list>
           <!-- 在父组件index.vue中把频道信息传给articleList.vue组件
          article-list放在for循环中，但它并不会立刻创建channels.length个组件出来，
          而是具备懒加载的效果： 当你激活当前的tab签，会去创建一个对应的articleList组件。 -->
          <!-- <div class="scroll-wrapper">
              <p>内容 {{ item.name }}内容</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
          </div> -->
      </van-tab>
  </van-tabs>
   <!-- 频道列表 开关 通过定位 -->
    <div class="bar-btn" @click="hShowChannelEdit">
        <van-icon name="wap-nav" size="24" />
    </div>
     <!-- 文章 --- 更多操作 -->
     <!-- 监听子组件传出的showMoreAction事件 -->
     <!-- 给子组件加一个ref之后，就可以在当前组件中通过this.$refs.refMoreAction
      来找到这个子组件 -->
      <!-- ref="refMoreAction" -->
    <van-popup v-model="showMoreAction" :style="{ width: '80%' }">
      <more-action
      ref="refMoreAction"
      @dislike="hDislike"
      @report="hReport"
      ></more-action>
    </van-popup>
    <!-- 频道管理 -->
    <!-- 子传父,监听close， updateCurChannel -->
    <van-action-sheet v-model="showChannelEdit" title="频道管理">
      <channel-edit
      ref="refChannelEdit"
      :channels="channels"
       :activeIndex="activeIndex"
       @close="hCloseChannelEdit"
       @updateCurIndex="hUpdateCurIndex"
       @updateCurChannel="hUpdateCurChannel"></channel-edit>
    </van-action-sheet>
</div>
</template>

<script>
import { getChannels } from '@/api/channel.js'
import ArticleList from './articleList.vue'
import MoreAction from './moreAction.vue'
import { dislikeArticle, reportArticle } from '@/api/article.js'
import ChannelEdit from './channelEdit'
export default {
  name: 'home-index',
  data () {
    return {
      showMoreAction: false, // 是否显示更多操作弹层
      // 频道列表
      channels: [],
      articleId: null, // 当前要执行更多操作时的文章编号
      activeIndex: 0, // 表示当前tabs中处于活动状态是哪一个下标
      showChannelEdit: false // 这里我们先设置为 true 就能看到弹窗的页面了
    }
  },
  props: [],
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  created () {
    this.loadChannels()
  },
  methods: {
    hShowChannelEdit () {
      this.showChannelEdit = true
      if (this.$refs.refChannelEdit) {
        this.$refs.refChannelEdit.editing = false
      }
    },
    hCloseChannelEdit () {
      this.showChannelEdit = false
    },
    // 处理子组件抛出更新当前选中频道下标
    hUpdateCurIndex (index) {
      this.activeIndex = index
    },
    // 处理子组件中抛出的更新当前频道项的事件
    hUpdateCurChannel (channel) {
      console.log('处理子组件中抛出的更新当前频道项的事件', channel)
      // 1. 计算出这个频道在频道列表中的下标
      const idx = this.channels.findIndex(it => it.id === channel.id)
      // 2. 更新给activeIndex
      this.activeIndex = idx
      // this.showChannelEdit = false
    },
    delArticle () {
      // (1) 只是本地删除不是直接去删除后端数据（人不喜欢，别人有喜欢的）
      // 找到对应的articleList组件，把其中的list数据中找出那个文章，删除
      // (2) 在通知子组件articleList做删除时，由于一个父组件index.vue中有很多个
      // 子组件articleList，所以这里要引入事件总线来解决消息的发布
      // 事件总线发布消息
      // 参数是一个对象，表示当前要删除的文章编号，及当前的频道编号
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channels[this.activeIndex].id
      }
      // console.log(eventObj)
      this.$eventBus.$emit('delArticle', eventObj)
    },
    async hDislike () {
      // alert('收到子的dislike' + this.articleId)
      // 掉接口
      const result = await dislikeArticle(this.articleId)
      console.log(result)
      this.$toast.success('操作成功')
      // 关闭弹层
      this.showMoreAction = false
      // 删除文章
      this.delArticle()
      // 事件总线发布消息,参数是一个对象，其中包含：当前的频道编号，当前的文章编号。
      // const eventObj = {
      //   articleId: this.articleId,
      //   channelId: this.channels[this.activeIndex].id
      // }
      // console.log(eventObj)
      // this.$eventBus.$emit('delArticle', eventObj)
    },
    async hReport (reportTypeId) {
      // alert(reportTypeId)
      // 1. 调用接口
      const result = await reportArticle(this.articleId, reportTypeId)
      console.log(result)
      this.$toast.success('操作成功')
      // 2. 关闭弹层
      this.showMoreAction = false
      // 3. 删除文章
      this.delArticle()
    },
    hShowMoreAction (articleId) {
      // 从子组件articleList收到点击X的事件，并保存文章编号
      // alert('shoudao:showMoreAction' + articleId))
      //  1. 保存要操作的文章编号
      this.articleId = articleId
      // 2. 显示弹层
      this.showMoreAction = true
      // 3. 确保 moreAction组件中的isRport设置为false
      // 由于这个子组件MoreAction是在popup中放置的，所以只在当弹层出来时
      // 它才会创建出来，所以第一次点击x时，我们在这里并不能访问到这个refMoreAction,所有if判断
      // if (this.$refs.refMoreAction) {
      //   this.$refs.refMoreAction.isReport = false
      // }
      this.$refs.refMoreAction && (this.$refs.refMoreAction.isReport = false)
    },
    async loadChannels () {
      const result = await getChannels()
      // console.log(result)
      this.channels = result.data.data.channels
    }
  }
}
</script>

<style scoped lang='less'></style>
